<template>
    <n-space vertical size="large">
      <n-layout has-sider>
        <n-layout-sider
          collapse-mode="width"
          :collapsed-width="0"
          :width="240"
          show-trigger="arrow-circle"
          content-style="padding: 0px;"
          bordered
        >
          <p>
            <SysResourceMenuTree @select="onSelect" />
          </p>
        </n-layout-sider>
        <n-layout-content content-style="padding: 0px;">
          <div class="ml-4">
            <sys-resource-elm-list ref="tableRef" :queryFormValue="queryForm" class="ml-4" />
          </div>
        </n-layout-content>
      </n-layout>
    </n-space>

    <!--    <n-grid cols="12">-->
    <!--&lt;!&ndash;      <n-grid-item :span="2">&ndash;&gt;-->
    <!--&lt;!&ndash;        <SysResourceMenuTree @select="onSelect" />&ndash;&gt;-->
    <!--&lt;!&ndash;      </n-grid-item>&ndash;&gt;-->
    <!--      <n-grid-item :span="10">-->
    <!--        <div class="ml-4">-->
    <!--          <sys-resource-elm-list ref="tableRef" :queryFormValue="queryForm" class="ml-4" />-->
    <!--        </div>-->
    <!--      </n-grid-item>-->
    <!--    </n-grid>-->
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import {
  doDeleteModal,
  doSaveModal,
  doUpdateModal,
  onCheckedRowEvent,
  tableColumns
} from "../Service";
import SysResourceMenuTree from "@/views/SysResource/Menu/SysResourceMenuTree.vue";
import SysResourceElmList from "@/views/SysResource/Elm/SysResourceElmList.vue";
import SlashAppContext from "@/context/SlashAppContext";

export default defineComponent(
  {
    name: "SysResourceMenuMange",
    components: { SysResourceElmList, SysResourceMenuTree },
    setup() {
      const queryForm = ref<any>({
        resourceAppCode: SlashAppContext.getRequest().appCode
      });
      const tableRef = ref<any>();
      const onSelect = async (row: any) => {
        queryForm.value.fkParentId = row.id;
        setTimeout(() => {
          reloadTable();
        }, 50);
      };

      function reloadTable() {
        tableRef.value.reloadTable();
      }

      return {
        reloadTable,
        tableColumns,
        onCheckedRowEvent,
        queryForm,
        tableRef,
        doSaveModal,
        doUpdateModal,
        doDeleteModal,
        onSelect
      };
    }
  }
);


</script>

<style lang="less" scoped></style>
